<div class="modal-header">
    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.close()"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Manage Permissions</h4>
</div>
<div class="modal-body">
  <div style="overflow: auto; height: 300px">
    <ui-select ng-model="$ctrl.newGrantee.selected" on-select="$ctrl.addGrantee($item)">
       <ui-select-match placeholder="Add New User"></ui-select-match>
       <ui-select-choices repeat="user in $ctrl.foundUsers | filter:$select.search"
                         refresh="$ctrl.findUser($select.search)"
                         refresh-delay="0"
                         ui-disable-choice="user.alreadyGrantee">
        <div>
          <img ng-src="{{user.profile_image_url}}" height="24px">&nbsp;{{user.name}}
          <small ng-if="user.alreadyGrantee">(already has permission)</small>
        </div>
       </ui-select-choices>
    </ui-select>
      <br/>
       <table class="table table-condensed table-hover">
        <thead>
          <tr>
            <th></th>
            <th>User</th>
            <th>Permission</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        <tr ng-repeat="grantee in $ctrl.grantees">
          <td width="50px"><img ng-src="{{grantee.profile_image_url}}" height="40px"/></td>
          <td>{{grantee.name}} </td>
          <td>{{grantee.access_type}}</td>
          <td><button class="pull-right btn btn-sm btn-danger" ng-click="$ctrl.removeGrantee(grantee)">Remove</button></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
